<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">值班安排</text>
      <view class="nav-right">
        <uni-icons type="search" size="24" color="#fff" @tap="showSearch"/>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 日期切换 -->
      <view class="date-switcher">
        <uni-icons type="left" size="24" color="#007AFF" @tap="prevWeek"/>
        <text class="current-date">{{ currentDateRange }}</text>
        <uni-icons type="right" size="24" color="#007AFF" @tap="nextWeek"/>
      </view>
      
      <!-- 暂无值班安排状态 -->
      <view v-if="dutyList.length === 0" class="empty-state">
        <view class="empty-icon">
          <uni-icons type="list-empty" size="100" color="#ccc"/>
        </view>
        <text class="empty-text">暂无值班安排</text>
      </view>
      
      <!-- 值班列表 -->
      <view class="duty-list" v-else>
        <view v-for="item in dutyList" :key="item.id" class="duty-item">
          <view class="duty-date">
            <text class="date-text">{{ item.date }}</text>
            <text class="week-text">{{ item.week }}</text>
          </view>
          
          <view class="duty-info">
            <view class="info-row">
              <text class="info-label">值班时间：</text>
              <text class="info-value">{{ item.time }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">值班地点：</text>
              <text class="info-value">{{ item.location }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工作内容：</text>
              <text class="info-value">{{ item.content }}</text>
            </view>
          </view>
          
          <view class="duty-actions">
            <button class="action-btn" @tap="requestShift(item)">换班申请</button>
            <button class="action-btn" @tap="viewDetail(item)">查看详情</button>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部导航按钮 -->
    <view class="bottom-nav">
      <view class="nav-item active" @tap="navigateTo('/pages/counselor/duty-schedule')">
        <uni-icons type="list" size="24" color="#007AFF"/>
        <text class="nav-text active">值班安排</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/counselor/shift-request')">
        <uni-icons type="exchange" size="24" color="#999"/>
        <text class="nav-text">换班申请</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/counselor/more-functions')">
        <uni-icons type="more" size="24" color="#999"/>
        <text class="nav-text">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentDateRange: '',
        currentWeek: 0,
        dutyList: []
      }
    },
    onLoad() {
      this.loadCurrentWeekData();
    },
    methods: {
      // 导航到指定页面
      navigateTo(url) {
        // 如果点击的是当前页面，则不跳转
        if (getCurrentPages().slice(-1)[0].route !== url.replace('/pages/', '')) {
          uni.navigateTo({
            url: url
          });
        }
      },
      
      // 加载当前周的数据
      loadCurrentWeekData() {
        this.currentWeek = 0;
        this.updateDateRange();
        this.fetchDutyData();
      },
      
      // 更新日期范围显示
      updateDateRange() {
        const now = new Date();
        const startOfWeek = new Date(now);
        const day = now.getDay() || 7; // 调整为周一开始
        startOfWeek.setDate(now.getDate() - day + 1 + this.currentWeek * 7);
        
        const endOfWeek = new Date(startOfWeek);
        endOfWeek.setDate(startOfWeek.getDate() + 6);
        
        this.currentDateRange = `${this.formatDate(startOfWeek)} - ${this.formatDate(endOfWeek)}`;
      },
      
      // 格式化日期
      formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      
      // 获取值班数据
      fetchDutyData() {
        // 模拟数据
        this.dutyList = [
          {
            id: 1,
            date: '2023-06-26',
            week: '星期一',
            time: '09:00-17:00',
            location: '学生事务服务中心',
            content: '日常值班，处理学生咨询及事务办理'
          },
          {
            id: 2,
            date: '2023-06-28',
            week: '星期三',
            time: '09:00-17:00',
            location: '学生事务服务中心',
            content: '日常值班，处理学生咨询及事务办理'
          },
          {
            id: 3,
            date: '2023-07-01',
            week: '星期六',
            time: '09:00-12:00',
            location: '学生宿舍区',
            content: '周末值班，巡查宿舍安全'
          }
        ];
      },
      
      // 上一周
      prevWeek() {
        this.currentWeek--;
        this.updateDateRange();
        this.fetchDutyData();
      },
      
      // 下一周
      nextWeek() {
        this.currentWeek++;
        this.updateDateRange();
        this.fetchDutyData();
      },
      
      // 显示搜索
      showSearch() {
        // 实现搜索功能
        uni.showToast({
          title: '搜索功能待实现',
          icon: 'none'
        });
      },
      
      // 换班申请
      requestShift(item) {
        // 跳转到换班申请页面
        uni.navigateTo({
          url: '/pages/counselor/shift-request?id=' + item.id
        });
      },
      
      // 查看详情
      viewDetail(item) {
        // 查看详情功能
        uni.showModal({
          title: '值班详情',
          content: `日期：${item.date}\n时间：${item.time}\n地点：${item.location}\n内容：${item.content}`,
          showCancel: false
        });
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  .nav-bar {
    height: 88rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  
  .nav-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .content {
    flex: 1;
    padding: 30rpx;
  }
  
  .date-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
  }
  
  .current-date {
    font-size: 32rpx;
    color: #333;
  }
  
  .empty-state {
    text-align: center;
    padding: 150rpx 0;
    color: #999;
  }
  
  .empty-icon {
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
  }
  
  .duty-list {
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
  }
  
  .duty-item {
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .duty-item:last-child {
    border-bottom: none;
  }
  
  .duty-date {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .date-text {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
  
  .week-text {
    font-size: 28rpx;
    color: #007AFF;
    margin-left: 20rpx;
  }
  
  .duty-info {
    margin-bottom: 20rpx;
  }
  
  .info-row {
    display: flex;
    margin-bottom: 10rpx;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666;
    min-width: 150rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
  
  .duty-actions {
    display: flex;
    justify-content: flex-end;
  }
  
  .action-btn {
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    border-radius: 35rpx;
    margin-left: 20rpx;
  }
  
  .action-btn:first-child {
    background-color: #fff;
    color: #007AFF;
    border: 1rpx solid #007AFF;
  }
  
  .action-btn:last-child {
    background-color: #007AFF;
    color: #fff;
  }
  
  .tab-bar-placeholder {
    height: 120rpx;
  }
  
  /* 底部导航样式 */
  .bottom-nav {
    height: 120rpx;
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .nav-item.active .nav-text {
    color: #007AFF;
  }
  
  .nav-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
</style>